<template>
	<view class="nav" :style="{height:navBarHeight+'px'}">
	 <bgColor :height="200" :top="0" :opacity="opacity" />
	 <view class="nav-main">
	 <!-- 胶囊区域 -->
	 <view 
	  class="capsule-box"
	  :style="{height:menuHeight+'px',minHeight:menuHeight+'px', lineHeight:menuHeight+'px',bottom:menuBotton+'px',left:menuRight+'px'}"
	 >
	 <!-- 导航内容区域 -->
	  <slot></slot>
	 </view>
	 </view>
	</view>
</template>

<script>
	import bgColor from '@/components/bgColor.vue'
	export default {
		props: {
			opacity: {
				type: Number,
				default: 1
			}
		},
		components:{bgColor},
		created() {
			let globalData = getApp().globalData
			this.navBarHeight = globalData.navBarHeight
			this.menuHeight = globalData.menuHeight
			this.menuBotton = globalData.menuBotton
			this.menuRight = globalData.menuRight
		},
		name:"customNav",
		data() {
			return {
				navBarHeight:0,
				menuHeight:0,
				menuBotton: 0,
				menuRight: 0
			};
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 overflow: hidden;
	}
	.nav-main {
	 width: 100%;
	 height: 100%;
	 position: relative;
	}
	.nav .capsule-box {
	 position: absolute;
	 box-sizing: border-box;
	 width: 100%;
	}
</style>
